<template>
  <div class="home">
    <div class="title">
      包发财商城扫码入库
    </div>
    <div class="image">
      <div class="text" v-if="!src">二维码正在更新中...</div>
      <img :src="src" v-else />
    </div>
    <div class="desc">
      十分钟过期, 请使用包发财APP扫码后进行入库操作
    </div>
    <div class="btn" @click="refresh">刷新</div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      src: '',
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.fetch()
      const time = 1000 * 60 * 10
      // const time = 1000
      setInterval(() => {
        this.fetch()
      }, time)
    },
    fetch() {
      this.src = ''
      let url = process.env.VUE_APP_BASE_API
      url += '/api/s/index'
      // console.log(url)
      axios.post(url).then(response => {
        const { data } = response.data
        console.log(data)
        this.src = data.src
      })
    },
    refresh() {
      window.location.href = window.location.href
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  color: red;
  font-size: 48px;
}
.image {
  margin: 30px;
  .text {
    margin: 20px;
    font-size: 30px;
  }
  img {
    width: 365px;
    height: 365px;
  }
}
.desc {
  color: red;
  font-size: 30px;
}
.btn {
  display: inline-block;
  background: red;
  color: white;
  padding: 20px 40px;
  font-size: 30px;
  border-radius: 10px;
  margin-top: 30px;
  cursor: pointer;
}
</style>
